<template>
<div class="timeType content">
     <div style="display: flex;align-items: center;">
              <div :class="alarmEchartType == 1 ? 'monitoring-btn-active' : 'btn-common'" @click="changeTimeType(1)">24H</div>
              <div :class="alarmEchartType == 2 ? 'monitoring-btn-active' : 'btn-common'" @click="changeTimeType(2)"
                style="margin-left: 20px;">当月</div>
              <div :class="alarmEchartType == 3 ? 'monitoring-btn-active' : 'btn-common'" @click="changeTimeType(3)"
                style="margin-left: 20px;">当年</div>
            </div>

  <!-- <Radio-group size="small" v-model="time" @on-change="changeTimeType" type="button">
    <Radio  v-for="item in typeList" :key="item.label" :label="item.label">{{item.name}}</Radio>
  </Radio-group> -->
</div>
</template>

<script>
//  判断对象是否为空

export default {
  name: "timeType",
  data(){
    return {
      time:1,
      alarmEchartType:1
    }
  },
  props:{
    typeList:{
      type:Array,
      default:()=>{
        return [
          {name:'24h',label:1},
          {name:'当月',label:2},
          {name:'今年',label:3},
        ]
      }
    },
    fun:{
      type:Function,
      default:()=>{
        return true;
      },
    },
  },
  methods:{
    changeTimeType(value){
      this.alarmEchartType = value

      console.log(this.fun,this.fun());
      if(this.fun){
        this.$emit('changeTimeType',value);
      }else{
        this.fun(value);
      }

    }
  },
}
</script>

<style scoped lang="less">
@import "../../styles/setting.less";

.timeType{
  margin-top: -4px;

}


.monitoring-btn-active {
  cursor: pointer;
 min-width: 75px;
  height: 32px;
  padding: 0 15px!important;
  display: inline-block;
  background: @button-primary-active-bg;
  border-radius: 16px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
}

.btn-common {
  cursor: pointer;
  min-width: 75px;
  padding: 0 15px !important;
  height: 32px;
  background: var(--primary-table-bg-color);
  border-radius: 16px;
  border: 1px solid #3564A9;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #3564A9;
}
</style>